<template>
  <el-form ref="form" label-width="100px">
    <el-form-item :class="item.class" :label="item.label" v-for="(item, i) in formList" :key="i">
      <template v-if="item.itemType === 'img'">
        <el-image
          :src="item.value"
          :preview-src-list="[item.value]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </template>
      <template v-else-if="item.itemType === 'button'">
        <el-button v-for="b in item.list" :key="b.label" :type="b.type" @click="b.event">{{ b.label }}</el-button>
      </template>
      <p v-else>{{ formatValue(item) }}</p>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    formList: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {}
    },
    formRules: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    formatValue(item) {
      if(item.filter) {
        return this.$options.filters[item.filter] && this.$options.filters[item.filter](item.value)
      }
      return item.value
    }
  }
}
</script>